<template>
  <div>
    <el-container>
      <el-header height="100px">
        <GHeaderView/>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <OrderCom/>
        </el-aside>
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <SortCom/>
                  
                </div>
              </el-col>
            </el-row>
            <!-- 点餐菜单二级路由的出口 -->
            <router-view></router-view>
          </el-main>
          <el-footer> <BeiZhu/> </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script>
import OrderCom from "@/components/liwenjing/OrderCom.vue";
import SortCom from "@/components/liwenjing/SortCom.vue";
import BeiZhu from "@/components/liwenjing/BeiZhu.vue";
import GHeaderView from "@/components/yanwengang/GHeaderView.vue";
export default {
  components: {
    OrderCom,SortCom,BeiZhu,
    GHeaderView
  },
};
</script>
  
  <style scoped>
  *{
    padding: 0;
    margin: 0;
  }
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  /* line-height: 60px; */
  box-sizing: border-box;

}

.el-aside {
  
  color: #333;
  text-align: center;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
}

.el-main {

  color: #333;
  box-sizing: border-box;
  height: 600px;
}

body > .el-container {
  margin-bottom: 40px;
}
.bg-purple-dark {
  height: 60px;
  }

</style>